import './Recording.scss'
import { useRequest } from 'ahooks'
import { useEffect, useState } from 'react'
import { Spin, Empty, Pagination, Select } from 'antd'

import { Http } from '../../../../Common/Api'
import { VideoUrlA01 } from '../../../../Common/Configure/Video'

const A01Layout = {
    1: { width: '100%', height: '100%' },
    2: { width: '50%', height: '100%' },
    3: { width: '50%', height: '50%' },
    4: { width: '50%', height: '50%' },
    5: { width: '33%', height: '50%' },
    6: { width: '33%', height: '50%' },
}

export const RecordingA01 = ({ year, month, tabs, number, config }) => {
    const [yearSelect, setYearSelect] = useState(config?.default.year || [])
    const [monthSelect, setMonthSelect] = useState(config?.default.month || [])
    const [tabsSelect, setTabsSelect] = useState(config?.default.tabs || [])
    const [numberSelect, setNumberSelect] = useState(config?.default.number || [])
    const [videoList, setVideoList] = useState()
    const [videoTotal, setVideoTotal] = useState(0)

    const [PageIndex, setPageIndex] = useState(1)
    const [PageSize, setPageSize] = useState(6)

    const handleSelect = (uuid, array, setArray) => {
        if (array.includes(uuid)) setArray(array.filter(item => item !== uuid))
        else setArray([...array, uuid])
    }
    const yearClick = uuid => handleSelect(uuid, yearSelect, setYearSelect)
    const monthClick = uuid => handleSelect(uuid, monthSelect, setMonthSelect)
    const tabsClick = uuid => handleSelect(uuid, tabsSelect, setTabsSelect)
    const numberClick = uuid => handleSelect(uuid, numberSelect, setNumberSelect)
    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setVideoList(res.video)
            setVideoTotal(res.total)
        },
    })
    useEffect(() => {
        runAsync({
            url: 'getVideosByYearMonthOrg',
            data: {
                Year: yearSelect.join(','),
                Month: monthSelect.join(','),
                OrganizationUuid: tabsSelect.join(','),
                Number: numberSelect.join(','),
            },
        })
    }, [runAsync, yearSelect, monthSelect, tabsSelect, numberSelect])

    const DropdownMenu = ({ options, onItemClick, active }) => (
        <div className="list">
            {options.map(({ uuid, title, width }) => (
                <div
                    key={uuid}
                    style={{ '--width': width }}
                    onClick={() => onItemClick(uuid)}
                    className={active.includes(uuid) ? 'active' : ''}
                >
                    {title}
                </div>
            ))}
        </div>
    )

    return (
        <div className="RecordingA01">
            <div className="left">
                {!config?.hidden.includes('year') && (
                    <div className="label">
                        <div className="title">年份 : </div>
                        <DropdownMenu options={year} onItemClick={yearClick} active={yearSelect} />
                    </div>
                )}
                {!config?.hidden.includes('month') && (
                    <div className="label">
                        <div className="title">月份 : </div>
                        <DropdownMenu options={month} onItemClick={monthClick} active={monthSelect} />
                    </div>
                )}
                {!config?.hidden.includes('tabs') && (
                    <div className="label">
                        <div className="title">机构 : </div>
                        <DropdownMenu options={tabs} onItemClick={tabsClick} active={tabsSelect} />
                    </div>
                )}
                {!config?.hidden.includes('number') && (
                    <div className="label">
                        <div className="title">次数 : </div>
                        <DropdownMenu options={number} onItemClick={numberClick} active={numberSelect} />
                    </div>
                )}
            </div>
            <div className="right">
                {videoList ? (
                    videoList.length !== 0 ? (
                        <div className="videoList">
                            <div className="box">
                                {(() => {
                                    const data = videoList.slice((PageIndex - 1) * PageSize, PageIndex * PageSize)
                                    const length = data.length
                                    return data.map(({ uuid, tableName, coverUrl, fileUrl }) => (
                                        <div className="item" style={A01Layout[length]} key={uuid}>
                                            <div className="title">{tableName}</div>
                                            <VideoUrlA01 fileUrl={fileUrl} coverUrl={coverUrl} />
                                        </div>
                                    ))
                                })()}
                            </div>
                            <Select
                                value={PageSize}
                                onChange={setPageSize}
                                options={[
                                    { value: 1, label: '一屏' },
                                    { value: 2, label: '二屏' },
                                    { value: 4, label: '四屏' },
                                    { value: 6, label: '六屏' },
                                ]}
                            />
                            <Pagination
                                total={videoTotal}
                                hideOnSinglePage
                                showSizeChanger={false}
                                showTotal={(total, range) => `${range[0]}-${range[1]} / ${total} `}
                                current={PageIndex}
                                pageSize={PageSize}
                                onChange={setPageIndex}
                            />
                        </div>
                    ) : (
                        <Empty />
                    )
                ) : (
                    <Spin />
                )}
            </div>
        </div>
    )
}
